<template>
  <el-cascader ref="elCascaderRef" :options="options"
               :show-all-levels="false"
               :props="defaultProps"
               v-model="dataValue"
               :disabled="disabled"
               style="width: 100%;"
               change-on-select
               @change="valueChange"/>
</template>


<script setup>
import {productCategoryIndexAPI} from '/src/api/admin/crm.js'
import {onMounted, ref, watch} from "vue";

// cascader-级联选择器
defineOptions({
  name: 'XhProducCate', // 新建 产品分类
})

const props = defineProps({
  value: {
    type: Array,
    default: () => {
      return []
    }
  },
  /** 索引值 用于更新数据 */
  index: Number,
  /** 包含数据源 */
  item: Object,
  disabled: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['value-change'])

const options = ref([])
const defaultProps = ref({
  children: 'children',
  label: 'label',
  value: 'categoryId'
})
const dataValue = ref([])

const elCascaderRef = ref()


watch(() => props.value, function (val) {
  dataValue.value = val
})


onMounted(() => {
  console.log("xhProductCate onMounted")
  dataValue.value = props.value
  getProductCategoryIndex()
})

/** 获取产品分类数据 */
function getProductCategoryIndex() {
  productCategoryIndexAPI({
    type: 'tree'
  }).then(res => {
    options.value = res.data.data
  }).catch((e) => {
    console.log(e)
  })
}

function valueChange(val) {
  const nodes = elCascaderRef.value.getCheckedNodes()
  emits('value-change', {
    index: props.index,
    item: props.item,
    value: val,
    valueContent: nodes.length > 0 ? nodes[0].label : '' // 参考 https://segmentfault.com/q/1010000013063478
  })
}

</script>


<script type="text/javascript">
import ArrayMixin from './arrayMixin.js'

export default {

  components: {},
  // mixins: [ArrayMixin],
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>
